<script src="./home.component.js"></script>
<style src="./home.css" scoped></style>
<template>
  <view class="content">
		<!-- 空白页 -->
		<view v-if="!hasLogin">
			<view class="">
				<view class="bg-red  padding-lr  padding-tb-lg flex justify-between text-content">
					<view class="basis-df">
						<view class="padding-tb-sm">总收入（元）</view>
						<view class="text-xxxl text-price">0</view>
					</view>
					<view class="basis-df">
						<view class="padding-tb-sm">总笔数</view>
						<view class="text-xxxl">0</view>
					</view>
				</view>
			</view>
			<view class="flex flex-direction align-center">
				<view class="padding-bottom-xl padding-top-xxxl text-df">登录后即可查看您的发佣明细</view>
				<view class="text-red text-xl padding-tb-xs padding-lr-lg" @tap="bindLogin" style="border: 1px solid #ee2750;line-height: 50upx;">去登录</view>
			</view>
		</view>
		<!-- <view v-else-if="uerInfo.authIdentity!=1" class="empty">
			<view class="empty-tips">
				<view class="text-red text-xl" @tap="showshiming">未实名{{uerInfo.authIdentity}}<text class="cuIcon-right"></text></view>
			</view>
		</view> -->
		<view v-else>
		<view class="bg-white">
			<view class="bg-red padding-lr  padding-tb-lg flex justify-between text-content">
				<view class="basis-df">
					<view class="padding-tb-sm">总收入（元）</view>
					<view class="text-xxxl text-price">{{statisticsTotal.one}}</view>
				</view>
				<view class="basis-df">
					<view class="padding-tb-sm">总笔数</view>
					<view class="text-xxxl">{{statisticsTotal.two}}</view>
				</view>
			</view>
			
			<view class="padding padding-top padding-bottom-xs flex justify-center align-center text-black text-lg text-bold">
				<view class="basis-xs-1">
					<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="dateChange">
						<label class="uni-input">{{date}}</label>
						<label class="cuIcon-triangledownfill text-bold"></label>
					</picker>
				</view>
				<view class="basis-df text-cut">
					<picker mode="selector" @change="PickerCompany" range-key="companyName" :range="companyList">
						<view class="flex justify-center align-center">
							<label class="uni-input text-cut inline-block" style="max-width: 75%;"> {{title}}</label>
							<label class="cuIcon-triangledownfill text-bold"></label>
						</view>
					</picker>		
				</view>
				<view class="basis-xs-1 text-right">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<label class="uni-input">{{array[index].name}}</label>
						<label class="cuIcon-triangledownfill text-bold"></label>
					</picker>
				</view>
			</view>	
			<view class="padding-lr padding-bottom text-888888">
				收入：<label class="text-price">{{amount||'0'}}</label><label class="padding-left">笔数：{{num||'0'}}</label>
			</view>
			
		</view>
		<!-- 显示区域 -->
		<view v-if="show_lists.length" >
			<view class="cu-list menu sm-border" v-for="(item,index) in show_lists" :key="index">
				<view class="padding padding-bottom-xs padding-top-lg text-666 text-lg" v-if="item.monthDay">{{item.monthDay}}</view>
				<view class="cu-item padding bg-white">
					<view class="text-xxxl cuIcon-vipcard text-ff6600"></view>
					<view class="padding-left-sm">
						<view class="text-222 text-xl padding-bottom-xs text-cut" style="width:464upx">{{item.companyName}}</view>
						<view class="text-666 text-sm text-cut" style="width:464upx">支付渠道：{{item.type}}<label class="padding-left-sm">{{item.payeeAccount}}</label><label class="padding-left-sm">{{item.payTime}}</label></view>
					</view>
					<view class="basis-sm text-right text-222">
						+ <text class="text-price text-xl padding-left-xs">{{item.amount}}</text>
					</view>
				</view>
			</view>	
			<!--下拉刷新-->
			<text class="loading-text">
					{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
			</text>
		</view>
		<view class="text-center padding-tb" v-else>暂无</view>
		</view>
  	</view>
</template>
<script>
import {
	mapState,
} from 'vuex';
import { mapMutations } from 'vuex';

var page = 1
export default {
	data() {
		// 设置日期
		const currentDate = this.getDate({
			format: 'yyyy-mm'
		})
		return {
			index:0,
			array:[
				{
					
					type:'',
					name:'所有渠道'
				},
				{
					type:'招商银企',
					name:'招商银企'
				},
				{
					type:'广发银企',
					name:'广发银企'
				},
				{
					type:'支付宝',
					name:'支付宝'
				},
				{
					type:'QQ',
					name:'QQ'
				}
			],

			//index: 0,
			//step:0, // 默认显示请选择
			//index1: 0,
			statisticsTotal: {},
			statisticsTotalMonth: {},
			show_lists : '',//显示的订单列表
			amount:'0',
			num:'0',
			title: '所属企业',
			/* 上拉刷新 */
			loadingType: 0,
			contentText: {
				contentdown: "上拉显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多数据了"
			},
			date: currentDate,
			type:'',
			companyId:'',
			companyList:[],
		}
	},
	computed: {
		...mapState(['hasLogin','uerInfo']),
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	//  onShow(){
	// 	if(this.hasLogin){
	// 		this.getCompanyList();
	// 		this.statisticsCountAllIncome();
	// 		this.statisticsList();
	// 	}
	// },
	mounted() {
		if(this.hasLogin){
			this.getCompanyList();
			this.statisticsCountAllIncome();
			this.statisticsList();
		}
	},
	onShow(){
		//***************重置选择
		// 设置日期
		const currentDate = this.getDate({
			format: 'yyyy-mm'
		})	
		this.index = 0;
		this.type = "";
		this.date = currentDate;
		
		this.companyId = '';
		this.title= '所属企业';
		if(this.hasLogin){
			this.getCompanyList();
			this.statisticsCountAllIncome();
			this.statisticsList();
		}
	},
	onPullDownRefresh() {
		if(this.hasLogin){
			this.statisticsList();
		}
	},
	/*上拉刷新*/
	onReachBottom:function(){
		this.statisticsListMore();
	},
	methods: {
		...mapMutations(['logout']),
		bindLogin() {
			uni.navigateTo({
				url: '../login/login',
			});
		},
		// showshiming(){
		// 	uni.navigateTo({
		// 		url: '../certids/certids',
		// 	});
		// },
		statisticsCountAllIncome(){
			uni.request({
				url: this.$serverUrl+'/isalary/statistics/countAllIncome',
				method: "GET",
				header:{
					'content-type':'application/x-www-form-urlencoded',
					"Authorization":uni.getStorageSync('token')
				},
				success: (res) => {
					//uni.stopPullDownRefresh();
					if(res.data.code==0){
						//_this.order_lists = res.data.data
						this.statisticsTotal = res.data.data
					}else if (res.data.code == 4000) {
						uni.showToast({
							icon:'none',
							title: e.data.msg
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: '../login/login'
							})
						}, 2000)
						this.logout();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				}
			});
		},
		// statisticsCountAllIncomeByMonth(){
		// 	uni.request({
		// 		url: this.$serverUrl+'/isalary/statistics/countAllIncomeByMonth',
		// 		method: "GET",
		// 		data:{
		// 			ym:this.date.slice(0,7),
		// 		},
		// 		header:{
		// 			'content-type':'application/x-www-form-urlencoded',
		// 			"Authorization":uni.getStorageSync('token')
		// 		},
		// 		success: (res) => {
		// 			//uni.stopPullDownRefresh();
		// 			if(res.data.code==0){
		// 				//_this.order_lists = res.data.data
		// 				this.statisticsTotalMonth = res.data.data
		// 			}else if (res.data.code == 4000) {
		// 				uni.showToast({
		// 					icon:'none',
		// 					title: res.data.msg
		// 				});
		// 				setTimeout(()=>{
		// 					uni.navigateTo({
		// 						url: '../login/login'
		// 					})
		// 				}, 2000)
		// 			} else {
		// 				uni.showToast({
		// 					icon: 'none',
		// 					title: res.data.msg
		// 				});
		// 			}
		// 		}
		// 	});
		// },
		statisticsList(){
			let _this = this;
			page =1;
			uni.showLoading({title: '加载中'});
			uni.request({
				url: this.$serverUrl+'/isalary/statistics/list',
				method: "GET",
				data:{
					ym:this.date.slice(0,7),
					type:this.type,
					companyId:this.companyId,
					pageNum:page
				},
				header:{
					Authorization:uni.getStorageSync('token')
				},
				success: (res) => {
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();	//得到数据后停止下拉刷新
					if(res.data.code==0){
						_this.show_lists = res.data.data.result.list;
						_this.amount = res.data.data.amount;//收入
						_this.num = res.data.data.num; //笔数
						_this.loadingType = 0;//将loadingType归0重置
						uni.hideLoading();
						// var obj = [];//定义一个数组
						// var length = res.data.data.result.list.length
						// for (var i = 0; i < length - 1; i++) {
						// 	if (res.data.data.result.list[i]['monthDay'] == res.data.data.result.list[i + 1]['monthDay']) {//通过时间相同合并
						// 		obj.push(Object.assign(res.data.data.result.list[i],res.data.data.result.list[i + 1]))//合并，叠加
						// 	}
						// }
						// _this.show_lists = obj
					}else if (res.data.code == 4000) {
						uni.showToast({
							icon:'none',
							title: e.data.msg
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: '../login/login'
							})
						}, 2000)
						this.logout();
					}else if (res.data.code == 4002) {
						uni.showToast({
							icon:'none',
							title: res.data.msg
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: '../certids/certids'
							})
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				},
				fail: function(err) {
					uni.showToast({
						icon: 'none',
						title: err.errMsg,
						duration: 2000
					});
				}
			});
		},
		//滚动分页
		statisticsListMore(){
			let _this = this;
			page++
			if (_this.loadingType != 0) {
				return false; //loadingType!=0;直接返回
			}
			_this.loadingType = 1;
			uni.showNavigationBarLoading();
			uni.request({
				url: this.$serverUrl+'/isalary/statistics/list',
				method: "GET",
				data:{
					ym:this.date.slice(0,7),
					type:this.type,
					companyId:this.companyId,
					pageNum:page
				},
				header:{
					Authorization:uni.getStorageSync('token')
				},
				success: (res) => {
					//uni.stopPullDownRefresh();
					if(res.data.code==0){
						if(_this.show_lists.length == res.data.data.result.total){ //当之前的数据长度等于count时跳出函数，不继续执行下面语句
							_this.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return false;
						}
						_this.show_lists = _this.show_lists.concat(res.data.data.result.list)
						_this.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					}else if (res.data.code == 4000) {
						uni.showToast({
							icon:'none',
							title: res.data.msg
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: '../login/login'
							})
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				}
			});
		},
		// 获取年月日信息
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year;
			}
			month = month > 9 ? month : '0' + month;
			// day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		},
		dateChange: function(e) {
			//this.date = e.detail.value
			this.date = e.target.value.slice(0,7);
			console.log(this.date.slice(0,7));
			this.statisticsList();
			//this.statisticsCountAllIncomeByMonth();
		},
		bindPickerChange: function(e) {
			//console.log('picker发送选择改变，携带值为：' + e.detail.value)
			//this.index = e.detail.value
			//console.log(e.target.value);
			this.index = e.target.value   //取其下标
			var selected = this.array[this.index]           //获取选中的数组
			this.type = selected.type      //选中的id
			console.log(this.type);
			
			// this.title1 = this.array[e.target.value].name;
			// this.type = this.array[e.target.value].type //获取type
			this.statisticsList();
		},
		// bindPickerChanges: function(e) {
		// 	this.index = e.detail.value;
		// 	console.log(e.currentTarget.dataset);
		// 	console.log(e.currentTarget.dataset.type);
		// 	//console.log('可以传data-xx:xx',e.currentTarget.dataset.index,'\n默认传过来的是下标：',e.detail.value,'\n也可以传普通json传过来的type等：',e.currentTarget.dataset.type);
		// },
		getCompanyList(){
			uni.request({
				url: this.$serverUrl+'/isalary/statistics/companyList',
				method:'GET',
				header: {
					Authorization:uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.data.code == 0) {
						// uni.showToast({
						// 	icon: 'success',
						// 	title: res.data.msg
						// });
						this.companyList = res.data.data;
						//console.log(this.companyList);
					}else if (res.data.code == 4000) {
						uni.showToast({
							icon:'none',
							title: e.data.msg
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: '../login/login'
							})
						}, 2000)
						this.logout();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				},
				fail:function(e){
					uni.showToast({
						icon: 'none',
						title: e.errMsg
					});
				}
			})
		},
		PickerCompany(e) {
			//console.log(e)
			this.title = this.companyList[e.target.value].companyName
			// this.index1 = e.target.value   //取其下标
			// var selected = this.companyList[this.index1]           //获取选中的数组
			// this.companyId = selected.id      //选中的id
			// console.log(this.companyId);
			this.companyId = this.companyList[e.target.value].id //获取id
			this.statisticsList();
		},
	}
};
</script>
<style>
	page, .content{
		/* background: #FFFFFF; */
	}
	/* 空白页 */
	.empty{
		position:fixed;
		left: 0;
		top:0;
		width: 100%;
		height: 100vh;
		padding-bottom:100upx;
		display:flex;
		justify-content: center;
		flex-direction: column;
		align-items:center;
		background: #fff;
		
	}
	.empty image{
		width: 240upx;
		height: 160upx;
		margin-bottom:30upx;
	}
	.cu-list.menu>.cu-item:last-child:after{
		border-bottom: 1upx solid #ddd;
	}
	.cu-list+.cu-list{
		margin-top:0 ;
	}
</style>